<template>
    <div>
        <div><input type="text" placeholder="请输入关键词" v-model="keyword"><input type="button" value="查找" @click="btnsearch">
            <input type="button" value="新增" @click="btnadd"></div>
        <table>
            <thead>
                <tr>
                    <th>Id</th>
                    <th>书名</th>
                    <th>作者</th>
                    <th>价格</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in arr" :key="item.id">
                    <td>{{ item.id }}</td> 
                    <td>{{ item.bookName }}</td> 
                    <td>{{ item.author }}</td> 
                    <td>{{ item.price }}</td> 
                    <td>
                        <input type="button" value="编辑" @click="btnedit(item.id)">
                        <input type="button" value="删除" @click="btndel(item.id)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script setup>
import { useRouter,useRoute } from 'vue-router';
import { onMounted,ref } from 'vue';
import { fetchAllData ,fetchDelData} from '@/api/http';
const router =useRouter()
const route =useRoute()
const arr =ref([])
const keyword =ref('')
// //获取数据
onMounted(async ()=>{
let data=await fetchAllData()
arr.value=data.data
})
//查找过滤
async function btnsearch(){
    let data =await fetchAllData(keyword.value.trim())
    arr.value.splice(0)
    arr.value.push(...data.data)
    keyword.value=''
}
//跳转新增
function btnadd(){
    router.push('/book')
}
//编辑
function btnedit(id){
    console.log(id);
    
    router.push(`/book/${id}`)
}
//删除
async function btndel(id){
    let choice =confirm('你确定删除吗')
    if(choice){
        await fetchDelData(id)
        router.go(0)
    }
    
}

</script>
<style scoped>
table{
width: 500px;
    border: 1px solid ;
    text-align: center;
    border-collapse: collapse;
}
tr:nth-child(2n){
    background-color: pink;
    
}
td,th{
    border: 1px solid;
}
</style>